<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

<!--  1 select 选择一个  v-model放到 select标签里-->
<!--  单选只能选中一个值 v-model绑定的是一个值
    当我们选中option中的一个时 会将他对用的value赋值到Fruit中
-->
  <select name="abc"  v-model="Fruit">
    <option value="苹果" >苹果</option>
    <option value="香蕉" >香蕉</option>
    <option value="葡萄" >葡萄</option>
    <option value="橘子" >橘子</option>
  </select>
  <h2>你的选择{{Fruit}}</h2>

<!--2 可以选择多个 按住ctrl多选-->
<!--  多选中 v-model绑定的是一个数组-->
<!--  当选中多个值时 就会将选中的option对应的value 添加到数组fruits中-->
  <select name="123" v-model="fruits" multiple>
    <option value="苹果" >苹果</option>
    <option value="香蕉" >香蕉</option>
    <option value="葡萄" >葡萄</option>
    <option value="橘子" >橘子</option>
  </select>
  <h2>你的选择则{{fruits}}</h2>


</div>
  <script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"message",
      Fruit:'香蕉',
      fruits:[],

    },
    methods:{



    }

  })
</script>

</body>
</html>